import React, { Component ,PropTypes} from 'react'
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;


export class FormPreview extends Component {

  constructor(props) {
    super(props);
    console.log(this.props, '打印原型')
  }
  static propsTypes={
    fieldData:PropTypes.object.isRequired,
  }
  static defaultProps={
    fieldData:{
      label:'label'
    }
  };
  render() {
    let { fieldData } = this.props;
    fieldData=JSON.parse(fieldData)
    let formElements = [];
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    for (let field in fieldData) {
      // console.log(field);
      let labelStr = fieldData[field].label;
      let verify = fieldData[field].verify;
      switch (fieldData[field].type) {
        case 'input':
          formElements.push(
            <FormItem
                          {...formItemLayout}
                          label={labelStr}
                          key={labelStr}
                          hasFeedback
                        >
                          {getFieldDecorator(`${labelStr}`, { 
                            rules: [{
                              type:verify , message: '输入格式不正确',
                            }],
                          })(
                            <Input />
                          )}
                        </FormItem>)
          break
        case "options":
          let residences=fieldData[field].residences;
          formElements.push(
             <FormItem
                {...formItemLayout}
                label={labelStr}
                key={labelStr}
              >
                {getFieldDecorator(`${labelStr}`, {
                  initialValue: ['zhejiang', 'hangzhou', 'xihu'],
                 type:verify , message: '输入格式不正确',
                })(
                  <Cascader options={residences} />
                )}
              </FormItem>)
          break
        default:
          break

      }
    }
    return (
      <div className="preview">{formElements}</div>

    )
  }
}

FormPreview = Form.create()(FormPreview);













export default FormPreview
